<!-- @format -->

<template>
  <div>
    <el-form
      :model="numberValidateForm"
      ref="numberValidateForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        style="width:300px"
        label="姓名"
        width="180"
        prop="age"
        :rules="[
          { required: true, message: '姓名不能为空' },
          { type: 'number', message: '姓名必须为汉子' }
        ]"
      >
        <el-input
          type="age"
          v-model.number="numberValidateForm.age"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-form
      :model="numberValidateForm"
      ref="numberValidateForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        style="width:300px"
        label="年龄"
        prop="age"
        :rules="[
          { required: true, message: '年龄不能为空' },
          { type: 'number', message: '年龄必须为数字值' }
        ]"
      >
        <el-input
          type="age"
          v-model.number="numberValidateForm.age"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    性别

    <el-radio v-model="radio" label="1">男</el-radio>
    <el-radio v-model="radio" label="2">女</el-radio><br />
    状态<el-select v-model="value" clearable placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button type="primary"
      >上传<i class="el-icon-upload el-icon--right"></i
    ></el-button>
    <el-table :data="tableData" style="width:100%" row-click="handleClick">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleAdd"
            >新增</el-button
          >

          <el-button
            size="mini"
            type="danger"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="搜索"
        ><el-button type="primary" icon="el-icon-search">搜索</el-button>
      </el-table-column>
    </el-table>
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="日期">
          <el-input v-model="form.date"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numberValidateForm: {
        age: ''
      },
      radio: '1',
      options: [
        {
          value: '选项1',
          label: '激活'
        },
        {
          value: '选项2',
          label: '未激活'
        }
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路1518弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路1517弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路1519弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路1516弄'
        }
      ],
      dialogVisible: false,
      form: {},
      editIndex: null
    };
  },
  computed: {},
  mounted() {},
  methods: {
    handleDelete(index) {
      this.tableData.splice(index, 1);
    },
    handleAdd() {
      this.tableData.push({
        date: '2016-05-03',
        name: '',
        address: '上海市普陀区金沙江路1516弄'
      });
    },
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.form = row;
      this.editIndex = index;
    },
    handleClose() {
      this.$confirm('确认关闭?')
        .then(() => {
          this.tableData[this.editIndex] = this.form;
          this.dialogVisible = false;
        })
        .catch(() => {});
    }
  }
};
</script>
